<template>
  <view class="map-page">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="search-bar">
        <view class="search-bar-left" @click="toggleListView">
        <uni-icons type="list" size="20" color="#666"></uni-icons>
          <text class="search-bar-title">列表</text>
      </view>
        <view class="search-bar-divider"></view>
        <input
          class="search-bar-input"
          placeholder="搜索目的地/电站"
          placeholder-class="search-bar-placeholder"
          @click="openSearch"
        />
      </view>
    </view>

    <!-- 地图组件 -->
    <map
      id="map"
      class="map"
      :latitude="latitude"
      :longitude="longitude"
      :scale="scale"
      :show-location="true"
      :enable-zoom="true"
      :enable-scroll="true"
      :enable-rotate="false"
      :markers="markers"
      @regionchange="regionChange"
      @markertap="markerTap"
      @callouttap="calloutTap"
    ></map>

    <!-- 充电站列表 -->
    <scroll-view scroll-y="true" class="station-list" @scrolltolower="loadMore" v-if="showStationList && currentStation">
      <station-card 
        :station="currentStation"
        :show-location-click="false"
        @card-click="goToStation"
      />
    </scroll-view>

  </view>
</template>

<script>
import SmartTabbar from '@/components/smart-tabbar/index.vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import { getChargeStationList } from '@/api/charging/index.js'
import StationCard from '@/components/station-card/index.vue'
import locationManager from '@/utils/location.js' // 引入位置管理器

export default {
  components: {
		SmartTabbar,
		uniIcons,
		StationCard
	},
  data() {
    return {
      latitude: null, // 将从locationManager获取
      longitude: null, // 将从locationManager获取
      scale: 10, // 调得更小，显示更大的区域
      // 新增数据属性
      stationList: [], // 充电站列表
      userLat: null, // 用户纬度
      userLng: null, // 用户经度
      currentStation: null, // 当前显示的充电站信息
      showStationList: true, // 控制站点卡片的显示，默认显示
      stationCoordinates: [], // 充电站坐标信息
      markers: [], // 地图标记点数组
      // 移除拖动距离检测相关属性
      hasLoadedStations: false // 标记是否已经加载过站点数据
    }
  },
  onLoad(options) {
    console.log('地图页面接收到的参数:', options);
    
    // 接收从首页传递的数据
    if (options.mapData) {
      try {
        const mapData = JSON.parse(decodeURIComponent(options.mapData));
        console.log('解析后的地图数据:', mapData);
        
        // 判断入口类型
        if (mapData.entryType === 'card') {
          // 从卡片进入：不调用接口，直接使用传递的数据
          console.log('从卡片进入地图页');
          this.handleCardEntry(mapData);
        } else {
          // 从首页地图按钮进入：立即调用接口获取站点列表
          console.log('从首页地图按钮进入地图页');
          this.handleMapEntry(mapData);
        }
        
      } catch (error) {
        console.error('解析地图数据失败:', error);
        // 如果解析失败，使用默认位置获取
        this.getCurrentLocation();
      }
    } else {
      // 如果没有传入数据，使用默认位置获取
      this.getCurrentLocation();
    }
  },
  
  // 地图组件加载完成
  onReady() {
    console.log('地图组件加载完成');
    console.log('当前标记点:', this.markers);
    console.log('当前地图中心:', this.latitude, this.longitude);
    console.log('充电站列表:', this.stationList);
    console.log('充电站坐标信息:', this.stationCoordinates);
    
    // 检查标记点是否正确创建
    if (this.markers && this.markers.length > 0) {
      console.log('标记点数量:', this.markers.length);
      this.markers.forEach((marker, index) => {
        console.log(`标记点${index + 1}:`, marker);
        console.log(`标记点${index + 1}气泡内容:`, marker.callout.content);
      });
    } else {
      console.log('没有创建标记点');
    }
    
    // 检查充电站数据
    if (this.stationList && this.stationList.length > 0) {
      console.log('第一个充电站数据:', this.stationList[0]);
      console.log('第一个充电站状态文本:', this.getStationStatusText(this.stationList[0]));
      
      // 详细打印所有站点的ID信息
      console.log('=== 站点列表详细信息 ===');
      this.stationList.forEach((station, index) => {
        console.log(`站点${index + 1}:`, {
          id: station.id,
          idType: typeof station.id,
          stationId: station.stationId,
          stationIdType: typeof station.stationId,
          name: station.name
        });
      });
      console.log('========================');
    }
    
    // 调试当前状态
    this.debugCurrentState();
  },
  methods: {
    // 获取当前位置
    getCurrentLocation() {
      // 使用locationManager获取当前位置
      const currentLocation = locationManager.getCurrentLocation();
      
      if (currentLocation && !currentLocation.isDefault) {
        console.log('从locationManager获取位置成功:', currentLocation);
        this.latitude = currentLocation.latitude;
        this.longitude = currentLocation.longitude;
      } else {
        // 如果locationManager没有位置信息，尝试获取实时位置
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
            console.log('获取位置成功:', res);
            this.latitude = res.latitude;
            this.longitude = res.longitude;
        },
        fail: (err) => {
            console.error('获取位置失败:', err);
            // 使用locationManager的默认位置
            const defaultLocation = locationManager.getCurrentLocation();
            this.latitude = defaultLocation.latitude;
            this.longitude = defaultLocation.longitude;
          uni.showToast({
              title: '获取位置失败，使用默认位置',
            icon: 'none'
            });
          }
        });
        }
    },
    
    // 切换列表视图
    toggleListView() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    
    // 打开搜索
    openSearch() {
      uni.navigateTo({
        url: '/pages/search/index'
      })
    },
    
    // 地图区域变化
    regionChange(e) {
      if (e.type === 'end') {
        console.log('地图区域变化:', e.detail);
        
        // 获取地图中心坐标
        const centerLat = e.detail.centerLocation.latitude;
        const centerLng = e.detail.centerLocation.longitude;
        
        console.log('地图中心坐标:', centerLat, centerLng);
        
        // 更新地图中心坐标
        this.latitude = centerLat;
        this.longitude = centerLng;
        
        // 移除拖动时的接口调用逻辑，只更新标记点位置
        console.log('地图拖拽完成，更新标记点位置');
        this.updateMarkers();
      }
    },

    // 标记点点击事件
    markerTap(e) {
      console.log('标记点点击:', e.detail);
      const markerId = e.detail.markerId;
      console.log('点击的标记点ID:', markerId, '类型:', typeof markerId);
      console.log('当前站点列表:', this.stationList);
      
      // 尝试多种ID匹配方式，确保能找到
      let selectedStation = null;
      
      // 方式1：直接匹配（处理数字ID）
      selectedStation = this.stationList.find(station => station.id == markerId);
      if (selectedStation) {
        console.log('方式1匹配成功：直接匹配');
      } else {
        // 方式2：字符串转换后匹配（处理字符串ID）
        selectedStation = this.stationList.find(station => String(station.id) === String(markerId));
        if (selectedStation) {
          console.log('方式2匹配成功：字符串转换后匹配');
        } else {
          // 方式3：数字转换后匹配
          selectedStation = this.stationList.find(station => parseInt(station.id) == markerId);
          if (selectedStation) {
            console.log('方式3匹配成功：数字转换后匹配');
          }
        }
      }
      
      if (selectedStation) {
        console.log('找到对应的充电站:', selectedStation);
        this.currentStation = selectedStation;
        this.showStationList = true;
        console.log('站点卡片已显示，当前站点:', this.currentStation);
      } else {
        console.log('未找到对应的充电站信息，markerId:', markerId);
        console.log('站点列表详细信息:', this.stationList.map(s => ({
          id: s.id, 
          stationId: s.stationId,
          name: s.name
        })));
        this.showStationList = false;
        this.currentStation = null;
        uni.showToast({
          title: '暂无充电站信息',
          icon: 'none'
        });
      }
    },
    
    // 气泡点击事件
    calloutTap(e) {
      console.log('气泡点击:', e.detail);
      const markerId = e.detail.markerId;
      console.log('点击的气泡标记点ID:', markerId, '类型:', typeof markerId);
      console.log('当前站点列表:', this.stationList);
      
      // 尝试多种ID匹配方式，确保能找到
      let selectedStation = null;
      
      // 方式1：直接匹配（处理数字ID）
      selectedStation = this.stationList.find(station => station.id == markerId);
      if (selectedStation) {
        console.log('方式1匹配成功：直接匹配');
      } else {
        // 方式2：字符串转换后匹配（处理字符串ID）
        selectedStation = this.stationList.find(station => String(station.id) === String(markerId));
        if (selectedStation) {
          console.log('方式2匹配成功：字符串转换后匹配');
        } else {
          // 方式3：数字转换后匹配
          selectedStation = this.stationList.find(station => parseInt(station.id) == markerId);
          if (selectedStation) {
            console.log('方式3匹配成功：数字转换后匹配');
          }
        }
      }
      
      if (selectedStation) {
        console.log('找到对应的充电站:', selectedStation);
        this.currentStation = selectedStation;
        this.showStationList = true;
        console.log('站点卡片已显示，当前站点:', this.currentStation);
      } else {
        console.log('未找到对应的充电站信息，markerId:', markerId);
        console.log('站点列表详细信息:', this.stationList.map(s => ({
          id: s.id, 
          stationId: s.stationId,
          name: s.name
        })));
        this.showStationList = false;
        this.currentStation = null;
        uni.showToast({
          title: '暂无充电站信息',
          icon: 'none'
        });
      }
    },
    
    // 加载更多
    loadMore() {
      console.log('加载更多充电站数据')
    },
    
    // 跳转到充电站详情
    goToStation() {
      if (this.currentStation) {
        // 将充电站数据编码后传递到详情页面
        const stationData = encodeURIComponent(JSON.stringify(this.currentStation));
      uni.navigateTo({
          url: `/pages/station-detail/index?stationData=${stationData}`
        });
      } else {
        uni.showToast({
          title: '暂无充电站信息',
          icon: 'none'
        });
      }
    },

    // 获取充电站状态文本
    getStationStatusText(stationData) {
      // 参考首页的station-status结构
      let statusText = '';
      
      // 统一显示空闲状态
      if (stationData.fastRate && stationData.fastRate !== '0/0') {
        statusText = `空闲 ${stationData.fastRate}`;
      }
      
      return statusText || '暂无状态';
    },

    // 获取空闲状态文本
    getAvailableText(stationData) {
      let availableText = '';
      if (stationData.fastRate && stationData.fastRate !== '0/0') {
        availableText = `空闲 ${stationData.fastRate}`;
      }
      return availableText || '暂无状态';
    },
    
    // 处理从卡片进入的情况
    handleCardEntry(mapData) {
      console.log('处理从卡片进入的情况');
      // 设置充电站列表
      if (mapData.stationList && mapData.stationList.length > 0) {
        this.stationList = mapData.stationList;
        // 设置第一个充电站为当前显示
        this.currentStation = this.stationList[0];
        // 确保显示站点卡片
        this.showStationList = true;
        console.log('设置初始站点信息:', this.currentStation);
      }
      
      // 设置用户位置
      if (mapData.userLat && mapData.userLng) {
        this.userLat = mapData.userLat;
        this.userLng = mapData.userLng;
        // 设置地图中心为用户位置
        this.latitude = this.userLat;
        this.longitude = this.userLng;
      }
      
      // 处理卡片显示控制
      if (mapData.hideCards !== undefined) {
        // 如果是从首页进入，默认隐藏卡片，但点击气泡时会重新显示
        this.showStationList = !mapData.hideCards;
        console.log('设置卡片显示状态:', this.showStationList, 'hideCards:', mapData.hideCards);
      }
      
      // 处理充电站经纬度信息
      if (mapData.stationCoordinates && mapData.stationCoordinates.length > 0) {
        this.stationCoordinates = mapData.stationCoordinates;
        console.log('充电站坐标信息:', this.stationCoordinates);
        
        // 如果有充电站坐标，将地图中心设置为第一个充电站位置
        const firstStation = this.stationCoordinates[0];
        if (firstStation.latitude && firstStation.longitude) {
          this.latitude = parseFloat(firstStation.latitude);
          this.longitude = parseFloat(firstStation.longitude);
          // 使用默认缩放级别
          console.log('地图中心设置为充电站位置:', this.latitude, this.longitude);
          
          // 记录首次调用的坐标
          // this.lastApiCallLat = this.latitude; // 移除拖动距离检测
          // this.lastApiCallLng = this.longitude; // 移除拖动距离检测
        }
        
        // 处理充电站标记点
        this.markers = mapData.stationCoordinates.map(coord => {
          // 构建气泡内容 - 只显示空闲状态
          const availableText = this.getAvailableText(coord.stationData);
          
          const marker = {
            id: parseInt(coord.stationData.id) || coord.stationData.id, // 转换为数字ID，微信地图要求
            latitude: parseFloat(coord.latitude),
            longitude: parseFloat(coord.longitude),
            callout: {
              // 只显示空闲状态文本
              content: availableText,
              color: '#333',
              fontSize: 14, // 从18减小到14
              borderRadius: 8, // 从12减小到8
              padding: 13, // 从8增加到13，让气泡更大
              bgColor: '#fff',
              display: 'ALWAYS', // 始终显示气泡
              textAlign: 'center',
              borderWidth: 1,
              borderColor: '#e5e5e5',
              // 设置气泡样式，使其更像图片中的效果
              anchorY: 0,
              anchorX: 0,
              // 添加阴影效果
              boxShadow: '0 2rpx 8rpx rgba(0, 0, 0, 0.1)'
            }
          };
          console.log('创建标记点:', marker);
          console.log('标记点ID:', marker.id, '对应站点:', coord.stationData.name);
          console.log('气泡内容:', availableText);
          return marker;
        });
        console.log('地图标记点信息:', this.markers);
      } else {
        // 如果没有传入站点坐标，根据当前地图中心获取站点信息
        this.loadStationsByLocation(this.latitude, this.longitude);
      }
    },
    
    // 处理从首页地图按钮进入的情况
    handleMapEntry(mapData) {
      console.log('处理从首页地图按钮进入的情况');
      
      // 设置用户位置
      if (mapData.userLat && mapData.userLng) {
        this.userLat = mapData.userLat;
        this.userLng = mapData.userLng;
        // 设置地图中心为用户位置
        this.latitude = this.userLat;
        this.longitude = this.userLng;
        console.log('设置地图中心为用户位置:', this.latitude, this.longitude);
      }
      
      // 立即调用接口获取站点列表
      this.loadStationsByLocation(this.latitude, this.longitude);
      
      // 记录首次调用的坐标
      // this.lastApiCallLat = this.latitude; // 移除拖动距离检测
      // this.lastApiCallLng = this.longitude; // 移除拖动距离检测
    },
    
    // 根据坐标加载站点信息
    loadStationsByLocation(latitude, longitude) {
      console.log('根据坐标加载站点信息:', latitude, longitude);
      
      // 防止重复调用接口
      if (this.hasLoadedStations) {
        console.log('已经加载过站点数据，不再重复调用接口');
        return;
      }
      
      const params = {
        stationLat: latitude.toString(),
        stationLng: longitude.toString(),
        rows: '1000', // 设置rows为1000
        page: '1',
        sortType: '1' // 按距离排序
      };
      
      console.log('调用充电站列表接口，参数:', params);
      
      getChargeStationList(params).then(res => {
        console.log('充电站列表接口返回:', res);
        if (res.code === 0 && res.success) {
          const records = res.data.records || [];
          console.log('接口返回的原始数据:', records);
          
          // 更新站点列表
          this.stationList = records.map(item => {
            console.log('处理站点数据:', {
              stationId: item.stationId,
              stationIdType: typeof item.stationId,
              stationName: item.stationName
            });
            
            return {
              id: item.stationId || 0,
              name: item.stationName || '未知站点',
              distance: (item.dist ? item.dist + 'km' : '距离未知'),
              facilities: item.facilities || '暂无设施信息',
              price: item.fee || '0.00',
              status: 'available',
              availableCount: item.fastRate ? parseInt(item.fastRate.split('/')[0]) : 0,
              totalCount: item.fastRate ? parseInt(item.fastRate.split('/')[1]) : 0,
              // 新增字段
              shopName: item.shopName || null,
              fastRate: item.fastRate || '0/0',
              slowRate: item.slowRate || '0/0',
              parkFee: this.truncateText(item.parkFee || '停车信息未知', 20),
              // 添加经纬度字段
              stationLat: item.stationLat,
              stationLng: item.stationLng
            };
          });
          
          console.log('处理后的站点列表:', this.stationList);
          console.log('第一个站点的ID信息:', {
            id: this.stationList[0]?.id,
            idType: typeof this.stationList[0]?.id,
            stationId: this.stationList[0]?.stationId
          });
          
          // 更新标记点
          this.updateMarkers();
          
          // 标记已经加载过站点数据
          this.hasLoadedStations = true;
          
          // 如果是首次加载（从首页进入），设置第一个为当前显示
          if (this.stationList.length > 0 && !this.currentStation) {
            this.currentStation = this.stationList[0];
            this.showStationList = true;
            console.log('首次加载后设置当前站点:', this.currentStation);
          }
          
          console.log('站点信息更新成功，数据:', this.stationList);
        } else {
          console.error('充电站列表接口返回错误:', res.msg);
        }
      }).catch(err => {
        console.error('充电站列表接口错误:', err);
      });
    },
    
    // 更新标记点
    updateMarkers() {
      if (this.stationList && this.stationList.length > 0) {
        console.log('开始更新标记点，站点列表:', this.stationList);
        
        this.markers = this.stationList.map(station => {
          const availableText = this.getAvailableText(station);
          
          console.log('创建标记点，站点信息:', {
            stationId: station.stationId,
            id: station.id,
            name: station.name,
            idType: typeof station.id
          });
          
          const marker = {
            id: parseInt(station.id) || station.id, // 转换为数字ID，微信地图要求
            latitude: parseFloat(station.stationLat),
            longitude: parseFloat(station.stationLng),
            callout: {
              content: availableText,
              color: '#333',
              fontSize: 14, // 从18减小到14
              borderRadius: 8, // 从12减小到8
              padding: 13, // 从8增加到13，让气泡更大
              bgColor: '#fff',
              display: 'ALWAYS',
              textAlign: 'center',
              borderWidth: 1,
              borderColor: '#e5e5e5',
              anchorY: 0,
              anchorX: 0,
              boxShadow: '0 2rpx 8rpx rgba(0, 0, 0, 0.1)'
            }
          };
          
          console.log('生成的标记点:', marker);
          return marker;
        });
        
        console.log('标记点更新成功:', this.markers);
        // 简单打印每个标记点的ID和对应站点名称
        this.markers.forEach((marker, index) => {
          const station = this.stationList.find(s => s.id == marker.id || parseInt(s.id) == marker.id);
          console.log(`标记点${index + 1}: ID=${marker.id}(${typeof marker.id}), 站点名称=${station ? station.name : '未找到'}`);
        });
      }
    },
    
    // 文本截断方法
    truncateText(text, maxLength) {
      if (!text || text.length <= maxLength) {
        return text;
      }
      return text.substring(0, maxLength) + '...';
    },
    
    // 调试方法：检查当前状态
    debugCurrentState() {
      console.log('=== 当前状态调试信息 ===');
      console.log('showStationList:', this.showStationList);
      console.log('currentStation:', this.currentStation);
      console.log('stationList.length:', this.stationList.length);
      console.log('markers.length:', this.markers.length);
      console.log('========================');
    }
  }
}
</script>

<style scoped>
.map-page {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* 顶部导航栏 */
.top-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10vh; /* 占用10%的高度 */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 30rpx 0rpx 30rpx;
  background: transparent;
  box-sizing: border-box;
}

.search-bar {
  background: #fff;
  border-radius: 30rpx;
  padding: 6rpx 30rpx;
  display: flex;
  align-items: center;
  margin: 30rpx 10rpx 0rpx 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  flex: 1;
}

.search-bar-left {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.search-bar-left:active {
  opacity: 0.7;
}

.search-bar-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
}

.search-bar-divider {
  width: 2rpx;
  height: 36rpx;
  background: #e5e5e5;
  margin: 0 18rpx;
}

.search-bar-input {
  flex: 1;
  font-size: 24rpx;
  color: #333;
}

.search-bar-placeholder {
  color: #999;
}

/* 地图组件 */
.map {
  width: 100%;
  height: 100%;
  margin-top: 0;
}

/* 充电站列表样式 */
.station-list {
  background: transparent;
  padding-bottom: 120rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 60vh;
}

.station-item {
  width: 85%;
  margin: 0 auto 20rpx auto;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
  padding: 20rpx;
  display: flex;
  position: relative;
}

.station-info {
  flex: 1;
}

.station-jam {
  background: linear-gradient(180deg, #b97a56 0%, #eac9b0 100%);
  border-bottom-right-radius: 16rpx;
  padding: 0 24rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5rpx;
  left: -5rpx;
}

.station-jam-text {
  color: #fff;
  font-size: 22rpx;
  font-weight: bold;
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.station-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.station-distance {
  display: flex;
  align-items: center;
  border: 1rpx solid #e5e5e5;
  border-radius: 24rpx;
  padding: 4rpx 8rpx;
}

.distance-text {
  font-size: 24rpx;
  color: #666;
}

.station-details {
  margin-bottom: 10rpx;
}

.station-facilities {
  font-size: 24rpx;
  color: #666;
}

.station-pricing {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 24rpx;
  color: #ff6b35;
}

.price-amount {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
}

.price-unit {
  font-size: 24rpx;
  color: #ff6b35;
  margin-right: 20rpx;
}

.station-rating {
  display: flex;
  align-items: center;
  background: none;
  padding: 0;
}

.station-rating-icon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #bfc3c9 0%, #e6e8eb 100%);
  margin-right: 0;
}

.station-rating-rateIcon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #ff6b35 0%, #ffb59a 100%);
  margin-right: 0;
}

.station-rating-p {
  color: #fff;
  font-weight: bold;
  font-size: 24rpx;
}

.station-rating-rate {
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
}

.station-rating-text-bg {
  background: #f5f6f7;
  border-radius: 0 8rpx 8rpx 0;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
}

.station-rating-text-numBg {
  background: #fff7f5;
  border-radius: 0 8rpx 8rpx 0;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
}

.station-rating-text {
  color: #888;
  font-size: 22rpx;
}

.station-rating-text-num {
  color: #ff6b35;
  font-size: 20rpx;
  font-weight: bold;
}

.station-status {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.member-price-badge {
  display: inline-flex;
  align-items: center;
  height: 36rpx;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.member-price-label {
  background: #ff6b35;
  color: #fff;
  font-size: 18rpx;
  font-weight: bold;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  border-radius: 8rpx 0 0 8rpx;
  box-sizing: border-box;
}

.member-price-value {
  position: relative;
  background: #fff;
  color: #ff6b35;
  font-size: 18rpx;
  font-weight: bold;
  padding: 0 16rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  border-radius: 0 8rpx 8rpx 0;
  border: 2rpx solid #ff6b35;
  border-left: none;
  box-sizing: border-box;
}

.member-price-value::before {
  content: '';
  position: absolute;
  left: -12rpx;
  top: 0;
  width: 24rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 18rpx 0 0 18rpx;
  z-index: 1;
}
</style>
